<!--
  @Descripttion:：功能描述
  @Author：yejianbo
  @Date：2022年05月26日 12:35:40
-->
<template>
  <section class="home-page">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="content-page">
      <div class="swiper" id="home-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <!-- banner -->
            <div class="banner">
              <Banner ref="banner" />
            </div>
          </div>
          <div class="swiper-slide">
            <!-- 热门企业 -->
            <div class="module-enter" @click="linkTo('companyList', 'hot')">
              <img src="@/assets/images/home/p1.jpeg" alt="" />
              <div class="slogin slogin1">
                <div class="title2">
                  POPULAR COMPANY
                  <img
                    style="width: 100%"
                    src="@/assets/images/home/click_Icon.png"
                    alt=""
                  />
                </div>
                <div class="title1">热门企业</div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <!-- 热门职位 -->
            <div class="module-enter" @click="linkTo('jobList', 'hot')">
              <img src="@/assets/images/home/p2.jpeg" alt="" />
              <div class="slogin slogin2">
                <div class="title2">
                  POPULAR RECRUITMENT
                  <img
                    style="width: 100%"
                    src="@/assets/images/home/click_Icon.png"
                    alt=""
                  />
                </div>
                <div class="title1">热门职位</div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <!-- 最新企业 -->
            <div class="module-enter" @click="linkTo('companyList', 'new')">
              <img src="@/assets/images/home/p3.jpeg" alt="" />
              <div class="slogin slogin3">
                <div class="title2">
                  LATEST COMPANY
                  <img
                    style="width: 100%"
                    src="@/assets/images/home/click_Icon.png"
                    alt=""
                  />
                </div>
                <div class="title1">最新企业</div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <!-- 最新职位 -->
            <div class="module-enter" @click="linkTo('jobList', 'new')">
              <img src="@/assets/images/home/p4.jpeg" alt="" />
              <div class="slogin slogin4">
                <div class="title2">
                  LATEST RECRUITMENT
                  <img
                    style="width: 100%"
                    src="@/assets/images/home/click_Icon.png"
                    alt=""
                  />
                </div>
                <div class="title1">最新职位</div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <!-- 企业的话 -->
            <div class="module-enter">
              <div class="other-service">
                <!-- <div class="en-title center">ENTERPRISE COMMENTS</div>
                <div class="cn-title center">企业的话</div> -->
                <div class="en-title center">COMPANY COMMENTS</div>
                <div class="cn-title center">企业的话</div>
                <div class="user-block">
                  <div class="user-item user1">
                    <div class="user-info right">
                      <!-- <img
                        class="user-head"
                        src="@/assets/images/home/person4.png"
                        alt=""
                      /> -->
                      <img
                        class="user-head"
                        src="@/assets/images/home/c1.jpg"
                        alt=""
                      />
                      <div class="name">徐亮</div>
                      <div class="user-title">
                        平安集团金融壹账通<br />人工智能研究院总工程师
                      </div>
                    </div>
                    <img
                      class="user-icon"
                      src="@/assets/images/home/user1_icon.png"
                      alt=""
                    />
                    <div class="word">
                      <span
                        >金融大数据的发展需要复合型人才，既了解技术的发展和趋势，又懂得业务的应用和价值，对于人才培养提出了更高要求。</span
                      >
                    </div>
                  </div>
                  <div class="user-item user2">
                    <div class="user-info">
                      <!-- <img
                        class="user-head"
                        src="@/assets/images/home/person5.png"
                        alt=""
                      /> -->
                      <img
                        class="user-head"
                        src="@/assets/images/home/c2.jpg"
                        alt=""
                      />
                      <div class="name">王孝宇</div>
                      <div class="user-title">云天励飞首席科学家</div>
                    </div>
                    <img
                      class="user-icon"
                      src="@/assets/images/home/user2_icon.png"
                      alt=""
                    />
                    <div class="word">
                      <span
                        >数据是面向未来智能科技的重要资产，在企业发展历程中，数据人才是核心的财富。</span
                      >
                    </div>
                  </div>
                  <div class="user-item user3">
                    <div class="user-info right">
                      <!-- <img
                        class="user-head"
                        src="@/assets/images/home/person6.png"
                        alt=""
                      /> -->
                      <img
                        class="user-head"
                        src="@/assets/images/home/c3.jpg"
                        alt=""
                      />
                      <div class="name">潘叡</div>
                      <div class="user-title">香港汇立集团中国区总裁</div>
                    </div>
                    <img
                      class="user-icon"
                      src="@/assets/images/home/user3_icon.png"
                      alt=""
                    />
                    <div class="word">
                      <span
                        >数据是金融信息化发展的新阶段，也是金融业务数字化的要素载体，我们期待更多金融数据技术的探索，同时期待数据学徒涌现出更多致力投身于此的优秀人才。</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <!-- 学生的话 -->
            <div class="module-enter">
              <div class="other-service">
                <div class="en-title center">STUDENT COMMENTS</div>
                <div class="cn-title center">学生的话</div>
                <div class="user-block">
                  <div class="user-item user4">
                    <div class="user-info">
                      <img
                        class="user-head"
                        src="@/assets/images/home/person1.jpg"
                        alt=""
                      />
                      <div class="name">萧则和</div>
                      <div class="user-title">2018大赛一等奖</div>
                    </div>
                    <img
                      class="user-icon"
                      src="@/assets/images/home/user4_icon.png"
                      alt=""
                    />
                    <div class="word">
                      <span
                        >学徒平台不仅仅帮助我们打磨商业计划，指引我们一个未来更好的发展方向，同时帮助我们对接业界资源，让我们能够更加成熟。</span
                      >
                    </div>
                  </div>
                  <div class="user-item user5">
                    <div class="user-info right">
                      <img
                        class="user-head"
                        src="@/assets/images/home/person2.jpg"
                        alt=""
                      />
                      <div class="name">林群书</div>
                      <div class="user-title">2019大赛一等奖</div>
                    </div>
                    <img
                      class="user-icon"
                      src="@/assets/images/home/user5_icon.png"
                      alt=""
                    />
                    <div class="word">
                      <span
                        >通过数据学徒平台，我们在早期接触到了AI领域非常优秀的企业，这些企业也慢慢发展成了我们的客户，因为平台的国际化定位，我们也有了更加宽阔的全球化视角，在全球化战略布局中，也得到了相应的支持。</span
                      >
                    </div>
                  </div>
                  <div class="user-item user6">
                    <div class="user-info">
                      <img
                        class="user-head"
                        src="@/assets/images/home/person3.jpg"
                        alt=""
                      />
                      <div class="name">陈泽川</div>
                      <div class="user-title">2021 大赛一等奖</div>
                    </div>
                    <img
                      class="user-icon"
                      src="@/assets/images/home/user6_icon.png"
                      alt=""
                    />
                    <div class="word">
                      <span
                        >在这里，我找到了了解数据前沿领域的机会，得到了加入香港最有名的金融科技企业实习和学习的机会，也通过平台组织的比赛打磨了自己的项目，为我个人和团队进一步的发展提供了坚实的基础！</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <!-- 其他服务 -->
            <div class="module-enter" style="padding-bottom: 300px">
              <div class="module-enter-box">
                <!-- canvasMenu -->
                <CanvasMenu ref="canvasMenu" />
                <div class="footerBox">
                  <FooterMenu />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <MobliePage
      @linkTo="linkToMobile"
    />
  </section>
</template>

<script>
import Banner from "./components/banner.vue";
import FooterMenu from "@/components/footerMenu/index.vue";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import HeaderCom from "@/components/header/index.vue";
import { mapState } from "vuex";
import CanvasMenu from "../../components/canvasMenu/canvasMenu.vue";
import MobliePage from './mobile/index.vue';
export default {
  // 组件名称
  name: "home",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, Banner, FooterMenu, CanvasMenu, MobliePage },
  // 组件状态值
  data() {
    return { swiper: null };
  },
  // 计算属性
  computed: {
    ...mapState(["userMobile"]),
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    /**
     * @desc 跳转链接
     * @param {String} routeName 跳转路由名称
     * @param {String} type 请求数据类型 hot、new 最热、最新
     */
    linkTo(routeName, type) {
      // if(routeName=='otherServices'){
      //   this.$router.push({ path: routeName, query: { type: type } });
      //   return
      // }
      // if (!this.userMobile) {
      //   Message.error("请先登录");
      //   this.$router.push({ name: "login" });
      //   // this.$confirm("请先登录", "提示", {
      //   //   confirmButtonText: "确定",
      //   //   cancelButtonText: "取消",
      //   // })
      //   //   .then(() => {
      //   //     this.$router.push({ name: "login" });
      //   //   })
      //   //   .catch(() => {});
      //   return;
      // }
      this.$router.push({ name: routeName, params: { type: type } });
    },
    initSwiper() {
      if (this.swiper === null) {
        this.swiper = new Swiper("#home-swiper", {
          direction: "vertical",
          slidesPerView: 1,
          mousewheel: true,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
        });
        this.$refs.banner && this.$refs.banner.init();
      }
    },
    init() {
      this.initSwiper();
    },
    linkToMobile(arr) {
      this.linkTo(arr[0], arr[1])
    },
  },
  created() {},
  mounted() {
    this.init();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@media screen and (max-width: 750px) {
  #app {
    min-width: auto;
  }
  .home-page {
    padding-top: 0.54rem;
    .content-page {
      display: none !important;
    }
    .mobile-home-page {
      display: block !important;
    }
  }
}
</style>
<style lang="less" scoped>
.home-page {
  position: relative;
  width: 100%;
  height: 100%;
  .content-page {
    position: relative;
    width: 100%;
    height: calc(100% - 80px);
    top: 80px;
    overflow: hidden;
    .banner {
      position: relative;
      width: 100%;
      height: calc(100vh - 80px);
    }
    .module-enter {
      position: relative;
      width: 100%;
      height: calc(100vh - 80px);
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        position: relative;
        display: block;
        cursor: pointer;
        object-fit: cover;
        max-height: 100%;
        max-width: 1920px;
      }
      .slogin:hover .title2 > img {
        right: -15px;
      }
      .slogin {
        position: absolute;
        // top: 50%;
        bottom: 25%;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        cursor: pointer;
        padding: calc(100vw * 20 / 1920) calc(100vw * 80 / 1920);
        .title2 {
          font-size: 42px;
          font-family: "AppleSystemUIFont";
          color: #020200;
          line-height: calc(100vw * 80 / 1920);
          letter-spacing: 10px;
          color: #fff;
          text-align: right;
          letter-spacing: 0;
          padding-right: 91px;
          position: relative;
          img {
            width: 71px !important;
            position: absolute;
            top: 18px;
            right: 0;
            transition-duration: 0.3s;
          }
        }
        .title1 {
          font-size: 34px;
          padding-right: 91px;
          font-family: "Roboto", sans-serif;
          color: #0c0c0c;
          line-height: calc(100vw * 59 / 1920);
          margin-bottom: 21px;
          color: #fff;
          text-align: right;
        }
      }
      .slogin1 {
        background: rgba(21, 83, 154, 0.5);
      }
      .slogin2 {
        background: rgba(234, 90, 153, 0.5);
      }
      .slogin3 {
        background: rgba(0, 0, 0, 0.5);
      }
      .slogin4 {
        background: rgba(78, 137, 204, 0.5);
      }
      .black {
        .title1,
        .title2 {
          color: #000;
        }
      }
    }
    .swiper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      overflow: hidden;
    }
    .footerBox {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    .module-enter-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
    }
    .other-service {
      width: 100%;
      position: relative;
      padding-top: 110px;
      .cn-title {
        font-size: 22px;
        font-family: "Adobe Heiti Std";
        color: #000;
        line-height: 30px;
        text-align: center;
        position: absolute;
        width: 100%;
        left: 0;
        top: 50px;
      }
      .center {
        text-align: center;
      }
      .en-title {
        font-size: 30px;
        font-family: "Adobe Heiti Std";
        color: #020200;
        line-height: 30px;
        letter-spacing: 10px;
        text-align: center;
        font-weight: bold;
        position: absolute;
        width: 100%;
        left: 0;
        top: 10px;
      }
      .enter-block {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        padding: 0 calc((100% - 1200px) / 2) 0;
        height: 100%;
        .enter-item {
          position: relative;
          width: 260px;
          cursor: pointer;
          height: 336px;
          max-height: 100%;
          // margin: calc(100vw * 58 / 1920) 47px 0;
          margin-right: 60px;
          &:last-child {
            margin: 0;
          }
          .enter-img {
            display: block;
            width: 100%;
            height: 100%;
            // margin-bottom: calc(100vw * 66 / 1920);
          }
          .text-tips {
            position: absolute;
            top: calc(100vw * 31 / 1920);
            // right: calc(100vw * 48 / 1920);
            width: 80%;
            left: 10%;
            text-align: left;
            padding-right: 50px;
            .en-text {
              font-size: 18px;
              font-family: Adobe Heiti Std;
              color: #fff;
              line-height: 24px;
              text-align: right;
            }
            .cn-text {
              font-size: 22px;
              font-family: Adobe Heiti Std;
              color: #fff;
              line-height: 22px;
              text-align: right;
            }
            &:after {
              position: absolute;
              top: 0;
              right: 0;
              content: "";
              transition-duration: 0.3s;
              display: block;
              width: 31px;
              height: 31px;
              background: url("../../assets/images/home/arrow.png") no-repeat
                center / cover;
            }
          }
          &:hover {
            transform: scale3d(1.1);
          }
          &:hover .text-tips::after {
            right: -8px;
          }
        }
      }
      .user-block {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        padding: 0 calc(100vw * 86 / 1920);
        .user-item {
          position: relative;
          width: calc(100vw * 1440 / 1920);
          max-width: 1200px;
          height: calc((100vh - 203px) * 390 / 1660);
          padding: calc((100vh - 203px) * 52 / 1660)
            calc((100vh - 203px) * 116 / 1660);
          margin: calc((100vh - 203px) * 30 / 1660) auto;
          border-radius: 3px;
          .user-icon {
            width: 6%;
            position: absolute;
            top: 16%;
          }
          .user-info {
            width: 240px;
            min-width: 180px;
            float: left;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            .user-head {
              display: block;
              width: calc((100vh - 203px) * 173 / 1660);
              margin-bottom: calc((100vh - 203px) * 10 / 1660);
              border-radius: 20px;
            }
            .name {
              font-size: calc((100vh - 203px) * 60 / 1660);
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #0c0c0c;
              line-height: calc((100vh - 203px) * 84 / 1660);
              text-align: center;
            }
            .user-title {
              font-size: calc((100vh - 203px) * 20 / 1660);
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #6b6b6b;
              line-height: calc((100vh - 203px) * 28 / 1660);
              text-align: center;
            }
          }
          .user-info.right {
            float: right;
          }
          .word {
            position: relative;
            height: 100%;
            overflow: hidden;
            width: 53%;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            span {
              font-size: calc((100vh - 203px) * 30 / 1660);
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #0c0c0c;
              line-height: calc((100vh - 203px) * 60 / 1660);
              letter-spacing: 1px;
              vertical-align: middle;
            }
          }
        }
        .user1 {
          background: #e8f3ff;
          .user-icon {
            left: 15%;
          }
        }
        .user2 {
          background: #f8f2f5;
          .user-icon {
            right: 10%;
          }
        }
        .user3 {
          background: #fffff3;
          .user-icon {
            left: 15%;
          }
        }
        .user4 {
          background: #e8f3ff;
          .user-icon {
            right: 10%;
          }
        }
        .user5 {
          background: #f8f2f5;
          .user-icon {
            left: 15%;
          }
        }
        .user6 {
          background: #fffff3;
          .user-icon {
            right: 10%;
          }
        }
      }
    }
    .module-title {
      font-size: 24px;
      line-height: 35px;
      font-family: Adobe Heiti Std;
      font-weight: bold;
      color: #000000;
      margin-bottom: 10px;
      text-align: center;
    }
  }
}
@media screen and (min-height: 1000px) {
  //860
  .other-service {
    padding-top: 160px !important;
    .en-title {
      font-size: 36px !important;
      line-height: 44px !important;
    }
    .en-title {
      font-size: 36px !important;
      line-height: 44px !important;
    }
    .cn-title {
      font-size: 30px !important;
      line-height: 40px !important;
      top: 80px !important;
    }
    .enter-item {
      width: 308px !important;
      height: 400px !important;
      .text-tips {
        padding-right: 60px !important;

        .en-text,
        .cn-text {
          font-size: 20px !important;
          line-height: 30px !important;
        }
        &::after {
          width: 45px !important;
          height: 45px !important;
        }
      }
    }
  }
}
@media screen and (max-height: 840px) {
  //860
  .other-service {
    padding-top: 100px !important;
    .enter-item {
      width: 231px !important;
      height: 300px !important;
      .text-tips {
        padding-right: 30px !important;

        .en-text,
        .cn-text {
          font-size: 16px !important;
          line-height: 18px !important;
        }
        &::after {
          width: 25px !important;
          height: 25px !important;
        }
      }
    }
  }
}
@media screen and (max-height: 800px) {
  //860
  .other-service {
    padding-top: 95px !important;
    .enter-item {
      width: 184px !important;
      height: 240px !important;
      .text-tips {
        padding-right: 28px !important;
        .en-text,
        .cn-text {
          font-size: 14px !important;
          line-height: 16px !important;
        }
        &::after {
          width: 22px !important;
          height: 22px !important;
        }
      }
    }
  }
}
@media screen and (max-height: 740px) {
  //860
  .other-service {
    .enter-item {
      width: 154px !important;
      height: 200px !important;
      .text-tips {
        padding-right: 25px !important;
        width: 90%;
        left: 5%;
        .en-text,
        .cn-text {
          font-size: 12px !important;
          line-height: 14px !important;
        }
        &::after {
          width: 20px !important;
          height: 20px !important;
        }
      }
    }
  }
}
@media screen and (max-height: 710px) {
  //860
  .other-service {
    .enter-item {
      width: 143px !important;
      height: 186px !important;
    }
  }
}
@media screen and (max-height: 680px) {
  //860
  .other-service {
    .enter-item {
      width: 126px !important;
      height: 164px !important;
    }
  }
}
</style>
